<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <p>This is an example <mark>highlighted text</mark>.</p>
  <details>
    <summary>Click me</summary>
    <p>Content of the accordion panel.</p>
  </details>


  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Opera">
    <option value="Internet Explorer">
  </datalist>
  <a href="#">Sick Hover</a>
</body>
<style>
  a {
    color: #000;
    position: relative;
    text-decoration: none;
  }

  a::before {
    background: hsl(45 100% 70%);
    content: '';
    inset: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-in-out;
    z-index: -1;
  }

  a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* Presentational styles */
  body {
    display: grid;
    font-family: system-ui, sans;
    font-size: 3.5rem;
    font-weight: 800;
    height: 100vh;
    place-items: center;
  }
</style>

</html>